import React from 'react';
import classNames from 'classnames';

import { Link } from 'react-router';

import {
  ListGroup,
  ListGroupItem
} from 'react-bootstrap';

class ListItem extends React.Component {
  
  static propTypes = {
     item : React.PropTypes.object.isRequired
  }

  static defaultProps = {
     item : null
  }

  renderListHeader (item) {
     let { onClickHandle } = this.props;

     let listHeaderContent =  
      <div className="list-head">
          { 
            item.icon ? 
            <img src={item.icon} className="list-icon"/>  
            : null
          }
          <h4 className="list-title text-info">{item.name}</h4>
          {
              item.descr ? 
              <div className="list-descr">
                {item.descr}
              </div>
              : null
          }
      </div>;

  	 return (
        onClickHandle? 
        <Link onClick={onClickHandle} >
      	   {listHeaderContent}
        </Link>
        :
        <Link to={item.link} >
           {listHeaderContent}
        </Link>
  	 );
  }

  renderListExtra (item) {
  	 return (
    	 	item.extra ?
    	 	<div className="list-extra text-danger"> { item.extra } </div>	
    	 	: null
  	 );
  }

  render(){

      let {item, className, ...other} = this.props;
      let blankClass = {
          "margin-bottom": item.blank
      };

      let listClass = classNames("list-item", blankClass, className);
      let listHeader = this.renderListHeader(item);
      let listExtra = this.renderListExtra(item);

      return (
      	<ListGroupItem {...other} className={listClass}  header={listHeader}>

            { listExtra }

            <div className="list-caret">
              <i className="iconfont icon-forward"></i>
            </div>

            <div className="blank0"></div>
          
      	</ListGroupItem>
      )
  }
}

export default ListItem;